<template>
  <div class="wrap">
    <div class="banner">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img src="../../assets/image/banner03.jpg">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="menu-box2">
      <div class="rdbox-warp" v-for="(item, index) in menuList" :key="index" @click="go(item)">
        <div :class="item.class" class="rdbox">
          <img :src="item.src">
        </div>
        <p class="rd-title">{{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import note from '../../assets/image/note.png'
  import question from '../../assets/image/question.png'
  import zige from '../../assets/image/zige.png'
  import qiandao from '../../assets/image/qiandao.png'
  import idcard from '../../assets/image/idcard.png'
  import chat from '../../assets/image/chat.png'
  export default {
    data() {
      return {
        menuList: [{
            src: idcard,
            title: '基本信息',
            class: 'color1',
            link: 'inDetail'
          },
          {
            type: '9',
            src: qiandao,
            title: '委员墙',
            class: 'color11',
            link: 'articlelist'
          },
          {
            type: '10',
            src: note,
            title: '信息公布',
            class: 'color12',
            link: 'articlelist'
          },
          {
            type: '11',
            src: zige,
            title: '履职情况',
            class: 'color13',
            link: 'articlelist'
          },
          {
            type: '12',
            src: question,
            title: '专家解难',
            class: 'color14',
            link: 'articlelist'
          },
          {
            src: chat,
            title: '交流互动',
            class: 'color9',
            link: 'chat'
          }
        ]
      }
    },
    methods: {
      go: function (item) {
        var that = this
        localStorage.setItem('type', item.type)
        that.$router.push({
          name: item.link
        })
      }
    }
  }
</script>

<style>
  .menu-box2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #fff;
  }

  .rdbox-warp {
    width: 33.33%;
    padding: 36px 0;
    box-sizing: border-box;
    border-right: #cdcdcd solid 1px;
    border-bottom: #cdcdcd solid 1px;
  }

  .rdbox-warp:nth-child(3) {
    border-right: none;
  }
  .rdbox-warp:nth-child(6) {
    border-right: none;
  }

  .rdbox {
    width: 88px;
    height: 88px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }

  .rdbox>img {
    width: 100%;
    height: 100%;
  }

  .rd-title {
    margin-top: 16px;
    text-align: center;
    font-size: 22px;
    color: #323232;
  }
</style>
